<template>
  <div class="talk">
    <button @click="getLoveTalk">获取土味情话</button>
    <ul>
      <li v-for="item in talkStore.talkList" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
import axios from "axios";
import {nanoid} from "nanoid";
import useTalkStore from '@/stores/lovetalk'

const talkStore = useTalkStore()

async function getLoveTalk() {
  try {
    // 连续两次解构赋值, 并且重命名
    let {data: {content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    let obj = {id: nanoid(), title}
    // talkList.unshift(obj)
  } catch (error) {
    alert(error)
  }
}
</script>

<style scoped>
  .talk {
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>